<template>
  <div class="shop_ours">
    <!-- 导航条 -->
    <van-nav-bar title="我的" left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 头像 -->
    <div class="my_portraits">
      <div class="my_left">
        <van-image class="mt_img" width="64" height="64" fit="cover" round :src="require('../../assets/img/touxiang.png')"/>
        <span class="mt_tit">nihao</span>
      </div>
      <van-icon class="my_right" name="setting" />
    </div>

    <!-- 优惠券等 -->
    <van-row class="my_mall">
      <van-col span="8">
        <van-badge class="num"><p>15621</p></van-badge>
        <div class="text"><van-icon class="emoji" name="gem-o" /><span class="txt">用户编号</span></div>
      </van-col>
      <van-col span="8">
        <van-badge class="num"><p>1000</p></van-badge>
        <div class="text"><van-icon class="emoji" name="award-o" /><span class="txt">当前积分</span></div>
      </van-col>
      <van-col span="8">
        <van-badge :content="5" class="num"><p>3</p></van-badge>
        <div class="text"><van-icon class="emoji" name="coupon-o" /><span class="txt">优惠券</span></div>
      </van-col>
    </van-row>

    <!-- 我的订单 -->
    <div class="my_order">
      <van-cell title="我的订单" value="更多" :border="false" is-link/>
      <van-grid>
        <van-grid-item icon="send-gift-o" text="待付款" />
        <van-grid-item icon="logistics" text="待发货" />
        <van-grid-item icon="cash-on-deliver" text="待收货" />
        <van-grid-item icon="flower-o" text="待评价" />
      </van-grid>
    </div>

    <!-- 功能项 -->
    <van-cell-group class="my_list" inset>
      <van-cell icon="desktop-o" title="我的足迹" value="更多" is-link/>
      <van-cell icon="coupon-o" title="我的卡劵" value="更多" is-link/>
      <van-cell icon="friends-o" title="我的拼团" value="更多" is-link/>
      <van-cell icon="discount" title="我的砍价" value="更多" is-link/>
      <van-cell icon="star-o" title="我的收藏" value="更多" is-link/>
      <van-cell icon="guide-o" title="收货地址" value="更多" to="shop-address" is-link/>
    </van-cell-group>

    <!-- Tabbar 标签栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home-o" name="shop-home" replace to="shop-home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" name="shop-class" replace to="shop-class">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" name="shop-buys" replace to="shop-buys">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" name="shop-ours" replace to="shop-ours">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import { ref } from 'vue';
export default {
  setup() {
    const onClickLeft = () => history.back();
    const active = ref('shop-ours');
    return {
      onClickLeft,
      active,
    };
  },


};

</script>

<style lang="less">
/* 头像 */
.my_portraits{
  padding: var(--van-padding-md) var(--van-padding-md);
  background: white;
  clear: both;
  overflow: hidden;

  .my_left{
    float: left;

    .mt_img{
      vertical-align: middle;
      display: inline-block;
    }

    .mt_tit{
      vertical-align: middle;
      display: inline-block;
      margin-left: var(--van-padding-sm);
      font-size: var(--van-font-size-lg);
    }
  }

  .my_right{
    float: right;
    color: var(--van-gray-6);
    font-size: var(--van-line-height-sm);
    vertical-align: middle;
    margin-top: 23px;
  }

}
/* ./ 头像 end here */

/* 优惠券等 */
.my_mall{
  padding: var(--van-padding-lg) var(--van-padding-md) var(--van-padding-lg) var(--van-padding-md);
  background: var(--van-gradient-red);
  text-align: center;
  .num{
    color: var(--van-white);
    text-align: center;
    margin-bottom: var(--van-padding-xs);
    p{
      margin: 0;
      padding: 0 8px;
      font-size: var(--van-line-height-lg);
    }
    .van-badge{
      background: white;
      color: red;
    }
  }

  .text{
    color: var(--van-white);
    display: block;
    font-size: var(--van-font-size-md);
    text-align: center;

    .emoji{
      display: inline-block;
      vertical-align: middle;
    }
    .txt{
      display: inline-block;
      vertical-align: middle;
      margin-left: var(--van-padding-base);
    }
  }
}
/* ./ 优惠券等 end here */


/* 我的订单*/
.my_order{
  padding: var(--van-padding-md) var(--van-padding-md) 0 var(--van-padding-md);
  overflow: hidden;
  .van-cell{
    border-top-left-radius: var(--van-border-radius-lg);
    border-top-right-radius: var(--van-border-radius-lg);
  }
  .van-grid{
    border-bottom-left-radius: var(--van-border-radius-lg);
    border-bottom-right-radius: var(--van-border-radius-lg);
    overflow: hidden;
  }
}
/* ./ 我的订单 end here */

/* 优惠券等 */
.my_list{
  margin-top:var(--van-padding-md) ;
}

/* ./ 优惠券等 end here */


</style>